<template>
  <div :class="page_style">
    <div class="omap">
      <Map></Map>
    </div>
    <div class="olist">
      <List></List>
    </div>
  </div>
</template>

<script>
import List from "../components/List";
import Map from "../components/Map";
export default {
  components: {
    List,
    Map,
  },
  data() {
    return {
      windowWidth: document.documentElement.clientWidth, //实时屏幕宽度
    };
  },
  watch: {
    windowWidth(val) {
      this.windowWidth = val;
    },
  },
  mounted() {
    /**
     * 获取当前屏幕的宽度
     */
    window.onresize = () => {
      return (() => {
        window.fullWidth = document.documentElement.clientWidth;
        this.windowWidth = window.fullWidth; // 宽
      })();
    };
  },
  computed: {
    page_style() {
      if (this.windowWidth > 600) {
        return "main";
      } else {
        return "mobile_main";
      }
    },
  },
};
</script>

<style scoped>
.main {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: space-between;
  min-width: 800px;
  box-sizing: border-box;
  padding: 10px;
}
.main .omap {
  width: 68%;
  height: 100%;
  box-sizing: border-box;
}
.main .olist {
  width: 30%;
  height: 100%;
  box-sizing: border-box;
}
.mobile_main {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 5px;
}
.mobile_main .omap {
  width: 100%;
  height: 40%;
}
.mobile_main .olist {
  width: 100%;
  height: 60%;
  box-sizing: border-box;
  padding-top: 10px;
}
</style>